<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ol4加载百度在线地图</title>
    <script src="../lib/ol4/ol4.js"></script>
    <script src="../lib/bd09.js"></script>
    <link rel="stylesheet" href="../css/ol4/ol.css">
    <link rel="stylesheet" href="../css/main.css">
</head>
<body>
<div id="map"></div>
</body>
<script>

    //+proj=longlat +ellps=GRS80 +no_defs

    const projectionBD09 = new ol.proj.Projection({
        code: 'BD:09',
        extent: [-20037726.37, -11708041.66, 20037726.37, 12474104.17],
        units: 'm',
        axisOrientation: 'enu',
        global: false
    });
    ol.proj.addProjection(projectionBD09);
    ol.proj.addCoordinateTransforms('EPSG:4326', 'BD:09', coordinate => {
        return lngLatToMercator(coordinate);
    }, coordinate => {
        return mercatorToLngLat(coordinate);
    });
    console.log(ol.proj.get('BD:09'));

    const projectionExtentInBD09 = projectionBD09.getExtent();
    // debugger
    const resolutions = [];
    const maxZoom = 18;
    const minZoom = 0;
    // 计算百度使用的分辨率
    for (let i = minZoom; i <= maxZoom; i++) {
        resolutions[i] = Math.pow(2, maxZoom - i);
    }
    // console.log(resolutions.toString());

    const tileGrid = new ol.tilegrid.TileGrid({
        origin: [0, 0],
        resolutions: resolutions,
        extent: projectionExtentInBD09
    });

    const baiduSource = new ol.source.TileImage({
        projection: 'BD:09',
        tileGrid: tileGrid,
        tileUrlFunction: (tileCoord,projection) => {
            console.log(projection);
            let [z, x, y] = tileCoord;
            // debugger
            // y = -y - 1;
            // 百度瓦片服务url将负数使用M前缀来标识
            // return `http://shangetu1.map.bdimg.com/it/u=x=${x};y=${y};z=${z};v=009;type=sate&fm=46&udt=20210407`;
            return `http://maponline0.bdimg.com/tile/?qt=vtile&x=${x}&y=${y}&z=${z}&styles=pl&udt=20210407`;
            // return `http://maponline0.bdimg.com/tile/?qt=vtile&x=${x}&y=${y}&z=${z}&styles=sl&udt=20210407`;
            // return `http://maponline1.bdimg.com/tile/?qt=vtile&x=${x}&y=${y}&z=${z}&styles=sl&udt=20210408`;
        }
    });
    // 百度地图层
    const baiduMapLayer = new ol.layer.Tile({
        source: baiduSource
    });

    const baiduSource1 = new ol.source.TileImage({
        projection: 'BD:09',
        tileGrid: tileGrid,
        tileUrlFunction: (tileCoord) => {
            let [z, x, y] = tileCoord;
            // debugger
            // y = -y - 1;
            // 百度瓦片服务url将负数使用M前缀来标识
            // return `http://shangetu1.map.bdimg.com/it/u=x=${x};y=${y};z=${z};v=009;type=sate&fm=46&udt=20210407`;
            // return `http://maponline0.bdimg.com/tile/?qt=vtile&x=${x}&y=${y}&z=${z}&styles=pl&udt=20210407`;
            // return `http://maponline0.bdimg.com/tile/?qt=vtile&x=${x}&y=${y}&z=${z}&styles=sl&udt=20210407`;
            // return `http://maponline1.bdimg.com/tile/?qt=vtile&x=${x}&y=${y}&z=${z}&styles=sl&udt=20210408`;
        }
    });
    // 百度地图层
    const baiduMapLayer1 = new ol.layer.Tile({
        source: baiduSource1
    });

    const centerPoint = [116.384722, 39.889916]; // 邢台 - [114.507435,37.074612] ; 北京 - [116.384722, 39.889916]

    const circlePoint = ol.proj.transform(centerPoint, 'EPSG:4326', 'BD:09');

    console.log(circlePoint);

    const iconFeature = new ol.Feature({
        geometry: new ol.geom.Point(circlePoint)
    });

    const iconStyle = new ol.style.Style({
        image: new ol.style.Icon({
            anchor: [10, 26],
            anchorXUnits: 'pixels',
            anchorYUnits: 'pixels',
            src: '../image/position_orange.png'
        })
    });

    iconFeature.setStyle(iconStyle);

    const vectorSource = new ol.source.Vector({
        features: [iconFeature]
    });

    const iconLayer = new ol.layer.Vector({
        source: vectorSource
    });

    const centerPoint1 = [116.454867, 39.897007];
    const circlePoint1 = ol.proj.transform(centerPoint1, 'EPSG:4326', 'BD:09');
    const iconFeature1 = new ol.Feature({
        geometry: new ol.geom.Point(circlePoint1)
    });

    const iconStyle1 = new ol.style.Style({
        image: new ol.style.Icon({
            anchor: [10, 26],
            anchorXUnits: 'pixels',
            anchorYUnits: 'pixels',
            src: '../image/position_orange.png'
        })
    });

    iconFeature1.setStyle(iconStyle1);

    const vectorSource1 = new ol.source.Vector({
        features: [iconFeature1]
    });

    const iconLayer1 = new ol.layer.Vector({
        source: vectorSource1
    });

    const map = new ol.Map({
        layers: [
            baiduMapLayer,
            // baiduMapLayer1,
            iconLayer,
            iconLayer1
        ],
        target: 'map',
        view: new ol.View({
            center: ol.proj.transform(centerPoint, 'EPSG:4326', 'BD:09'),
            projection: 'BD:09',
            zoom: 12,
            maxZoom: 18,
            minZoom: 3,
            resolutions
        })
    });

    // console.log(ol.proj.transform(centerPoint, 'EPSG:4326', 'BD:09'));
    // console.log(ol.proj.transform(centerPoint1, 'EPSG:4326', 'BD:09'));

    /*setTimeout(() => {
        map.getView().animate({
            center: ol.proj.transform(centerPoint1, 'EPSG:4326', 'BD:09'),
            duration:300
        }, 300);
    }, 2000);

    setTimeout(() => {
        map.getView().animate({
            center: ol.proj.transform(centerPoint, 'EPSG:4326', 'BD:09'),
            duration:300
        }, 300);
    }, 4000);*/
</script>
</html>